<!--
 * @description  :公路运输档案维护
 * @descriptionDetail:公路运输档案维护
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-10-09 22:21:21
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar title="公路运输档案维护">
    </theme-navbar>
    <!-- #endif -->
    <view class="content content-bg ifn-content" style="background-color: white">
      <u-form
        class="u-form-m"
        :label-style="labelStyle"
        :model="baseInfo"
        :error-type="['border-bottom', 'message',]"
        label-width="auto"
        label-position="top"
        ref="uForm"
      >
        <u-form-item label="车牌号" prop="carNo" :required="true">
          <u-input
            v-model="baseInfo.carNo"
            :disabled="isDisabled"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="登记单位" :required="true">
          <u-input
            :disabled="true"
            placeholder="请选择"
            v-model="baseInfo.orgName"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="品牌型号">
          <u-input
            v-model="baseInfo.brand"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="行驶证号码">
          <u-input
            v-model="baseInfo.licenseNo"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="车辆类型" :required="true" prop="carStyle">
          <dic-input
            :keyWord="$u.dic.DIC_KEYS.C_CAR_STYLE"
            :dicCode="baseInfo.carStyle"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('carStyle',$u.dic.DIC_KEYS.C_CAR_STYLE)"
            placeholder="请选择"
            :disabled="true"
            v-model="baseInfo.carStyleStr"
            @changeInputModelData="(name)=>{$set(baseInfo, 'carStyleStr', name)}"
            @click="showDic($u.dic.DIC_KEYS.C_CAR_STYLE,baseInfo.carStyle,'carStyle')"
          />
        </u-form-item>
        <u-form-item label="运输类型" :required="true" prop="transportStyle">
          <dic-input
            :keyWord="$u.dic.DIC_KEYS.K_TRANSPORT_STYLE"
            :dicCode="baseInfo.transportStyle"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('transportStyle',$u.dic.DIC_KEYS.K_TRANSPORT_STYLE)"
            placeholder="请选择"
            :disabled="true"
            v-model="baseInfo.transportStyleStr"
            @changeInputModelData="(name)=>{$set(baseInfo, 'transportStyleStr', name)}"
            @click="showDic($u.dic.DIC_KEYS.K_TRANSPORT_STYLE,baseInfo.transportStyle,'transportStyle')"
          />
        </u-form-item>
        <u-form-item label="车辆颜色" prop="carColor">
          <dic-input
            :keyWord="$u.dic.DIC_KEYS.C_CAR_COLOR"
            :dicCode="baseInfo.carColor"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('carColor',$u.dic.DIC_KEYS.C_CAR_COLOR)"
            placeholder="请选择"
            :disabled="true"
            v-model="baseInfo.carColorStr"
            @changeInputModelData="(name)=>{$set(baseInfo, 'carColorStr', name)}"
            @click="showDic($u.dic.DIC_KEYS.C_CAR_COLOR,baseInfo.carColor,'carColor')"
          />
        </u-form-item>
        <u-form-item label="是否改装车">
          <dic-input
            :keyWord="$u.dic.DIC_KEYS.S_SYS_YES_NO"
            :dicCode="baseInfo.pretend"
            :border="false"
            type="select"
            :select-open="dicSelectOpen('pretend',$u.dic.DIC_KEYS.S_SYS_YES_NO)"
            placeholder="请选择"
            :disabled="true"
            v-model="baseInfo.pretendStr"
            @changeInputModelData="(name)=>{$set(baseInfo, 'pretendStr', name)}"
            @click="showDic($u.dic.DIC_KEYS.S_SYS_YES_NO,baseInfo.pretend,'pretend')"
          />
        </u-form-item>
        <u-form-item label="所属公司">
          <u-input
            v-model="baseInfo.companyName"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="始发站" v-show="tranStatus">
          <u-input
            v-model="baseInfo.startStation"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="途径站" v-show="tranStatus">
          <u-input
            v-model="baseInfo.pathWayStation"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="终点站" v-show="tranStatus">
          <u-input
            v-model="baseInfo.endStation"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="时间班次" :border-bottom="false" v-show="tranStatus">
          <u-input
            v-model="baseInfo.service"
            placeholder="请输入"
          >
          </u-input>
        </u-form-item>
      </u-form>
    </view>
    <view>
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <form-section @rightTap="addGoodTap" title="驾驶员信息" :customStyle="customStyle" rightIcon="plus-circle" :rightIconSize="40"></form-section>
      <view class="info-lay u-m-b-30">
        <u-table>
          <u-tr>
            <u-th>
              驾驶员姓名
            </u-th>
            <u-th width="70%">
              证件类型
            </u-th>
          </u-tr>
          <u-tr v-for="(item, index) in driverList" :key="index">
            <u-td style="color: rgb(41, 121, 255);" :obj="item" @myTap="proList(item,index)">
              {{ item.name }}
            </u-td>
            <u-td width="70%">
              {{ $u.dic.getDicNameByKeyCode($u.dic.DIC_KEYS.IDCARD_TYPE,item.idCardType) }}
            </u-td>
          </u-tr>
        </u-table>
      </view>
    </view>
    <view>
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <form-section @rightTap="addPeopleTap" title="持有人信息" :customStyle="customStyle" rightIcon="plus-circle" :rightIconSize="40"></form-section>
      <view class="info-lay u-m-b-30">
        <u-table>
          <u-tr>
            <u-th>
              车主姓名
            </u-th>
            <u-th width="70%">
              证件类型
            </u-th>
          </u-tr>
          <u-tr v-for="(item, index) in handlerList" :key="index">
            <u-td style="color: rgb(41, 121, 255);" :obj="item" @myTap="proPeopleList(item,index)">
              {{ item.name }}
            </u-td>
            <u-td width="70%">
              {{ $u.dic.getDicNameByKeyCode($u.dic.DIC_KEYS.IDCARD_TYPE,item.idCardType) }}
            </u-td>
          </u-tr>
        </u-table>
      </view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.images" :customStyle="customStyle"></fsection>
    </view>
    <view class="u-form-m pl-10">
      <m-upload
        :uploadParam="fileUploadParam"
        upApiUrl="uploadBase64ForApp"
        :fileList="fileList"
        @on-list-change="changeUpload"
      ></m-upload>
    </view>
    <view class="submit-btns bottom-btns ">
      <u-button class="del" type="primary" @click="submit">
        保&nbsp;&nbsp;&nbsp;&nbsp;存
      </u-button>
    </view>
    <!-- 组织机构选择 -->
    <u-popup mode="bottom" height="80%" v-model="orgSelectShow">
      <org-select :cleanParentOrg="true" :isHybrid="true" limitNodeType="all" treeType="zm-comp" @choose="handlerChooseOrg"></org-select>
    </u-popup>
    <!-- 字典单选 -->
    <dic-choice
      :keyWord="dicKeyWords"
      :currentSelect="dicCurrentSelect"
      v-model="dicShow"
      @confirm="selectDicConfirm"
    ></dic-choice>
  </view>
</template>

<script>
import DicInput from "@/components/dic_input.vue";
import DicChoice from "@/components/dic_choice.vue";
import OrgSelect from "@/components/org-select.vue";
import intelligenceservice from "@/service/intelligence/intelligence.service";
import fsection from "@/components/form-section.vue";
import MUpload from "@/components/m-upload.vue";
import {uuid,} from '@/common/util.js';
import { K_TRAN_STYLE, } from '@/service/intelligence/mapping/enum.js'
import formSection from "@/components/form-section.vue";
export default {
  components: {
    fsection,MUpload,OrgSelect,DicChoice,DicInput,formSection,
  },
  data() {
    return {
      customStyle:{
        padding:"20rpx 32rpx",
      },
      fileUploadParam:{
        fiGroupCode:this.$FILE_GROUP_TYPE.k_transport_attr,
        bizId:"",
      },
      rules:{
        carNo: [{
          required: true,
          message: '请输入车牌号',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },{
          message:"车牌号格式不正确！",
          trigger: ['change', 'blur',],
          validator: (rule, value, callback) => {
            return this.$u.test.carNo(value);
          },
        },],
        carStyle: [{
          required: true,
          message: '请选择车辆类型',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        transportStyle: [{
          required: true,
          message: '请选择运输类型',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        driver: [{
          required: true,
          message: '请输入驾驶人姓名',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        driverLicNo: [{
          required: true,
          message: '请输入驾驶证号',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },{
          message:"驾驶证号格式不正确！",
          trigger: ['change', 'blur',],
          validator: (rule, value, callback) => {
            let regs = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/;
            return regs.test(this.baseInfo.driverLicNo);
          },
        },],
      },
      baseInfo: {
        brand: "",
        carNo: "",
        carStyle: "",
        companyName: "",
        driver: "",
        driverLicNo: "",
        endStation: "",
        historyUuid: "",
        licenseNo: "",
        menuCode: null,
        orgUuid: "",
        orgName:"",
        pathWayStation: "",
        service: "",
        startStation: "",
        transportStyle: "",
        uuid:"",
      },
      labelStyle: {
        fontWeight: 400,
        color: this.$theme.u_main_color,
        fontSize: '.75rem',
      },
      iconstlye: {
        'fontSize': '40rpx',
        'color': this.$theme.u_type_primary,
      },
      title:{
        images:"图片信息",
        tag:"关联产品",
        connectMsg:"公路运输档案维护",

      },
      fileList:[],
      orgSelectShow: false,
      dicKeyWords: "",
      dicCurrentSelect:"",
      dicShow: false,
      user: this.$storage.get(this.$rp.common.USER),
      isDisabled:false,
      tranStatus: false, // 运输类型判断下面表单是否显示
      driverList: [],   // 驾驶员信息
      handlerList:[],  // 持有人信息
    }
  },
  onLoad(opt) {
    this.from = opt.from;
    if(this.from === "edit"){
      this.isDisabled = false;
      this.baseInfo = this.getRouteParam();
      console.log(this.baseInfo);
      this.driverList = this.baseInfo.detailList.driverList;
      this.handlerList = this.baseInfo.detailList.handlerList;
      this.fileUploadParam.bizId = this.baseInfo.uuid;
      let params = {
        bizId: this.baseInfo.uuid,
        group: this.$FILE_GROUP_TYPE.k_transport_attr,
        menuCode: null,
      };
      intelligenceservice.findFilesByBizIdAndGroup(params).then(res => {
        if(res.success){
          this.fileList = res.data;
        }
      })
    }else {
      this.baseInfo.uuid = uuid();
      this.fileUploadParam.bizId = this.baseInfo.uuid;
      if(this.user.orgLevel === 1){
        this.baseInfo.orgName = this.user.provOrgName;
        this.baseInfo.orgUuid = this.user.provOrgUuid;
      }else{
        this.baseInfo.orgName = this.user.townOrgName;
        this.baseInfo.orgUuid = this.user.townOrgUuid;
      }
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    this.getListViewTop();
  },
  mounted(){
  },
  methods: {
    getListViewTop(){
      this.$u.getRect('.case-search-lay').then(res => {
        this.listViewTop = (this.$u.sys().statusBarHeight + res.top + res.height) + 'px';
      });
      this.$u.getRect('.submit-btns').then(res => {
        this.bottomOffset = (this.$u.sys().screenHeight - res.top) + "px";
      });
    },
    addGoodTap(){
      this.$u.route("pages/intelligence/components/driverInformation");
    },
    // 持有人信息跳转
    addPeopleTap(){
      this.$u.route("pages/intelligence/components/holderInfomation");
    },
    proList (itm, index) {
      console.log(index)
      this.setRouteParam({ ...itm, deleteIndex: index, });
      this.$u.route("pages/intelligence/components/driverInformation?from=" + "edit");
    },
    // 上传/删除图片事件
    changeUpload(list, key){
      if(list.length > 0){
        this.fileList = [...list,];
      }else{
        this.fileList = [];
      }
    },
    proPeopleList (itm, index) {
      this.setRouteParam({ ...itm, deleteIndex: index, });
      this.$u.route("pages/intelligence/components/holderInfomation?from=" + "edit");
    },
    handlerChooseOrg(orgs) {
      this.baseInfo.orgUuid = orgs[0].id;
      this.baseInfo.orgName = orgs[0].name;
      this.orgSelectShow = false;
    },
    selectDicConfirm(e) {
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_CAR_STYLE) { // 车辆类型
        this.baseInfo.carStyleStr = e[0].label;
        this.baseInfo.carStyle = e[0].extra.bcbCode;
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.K_TRANSPORT_STYLE) { // 运输类型
        this.baseInfo.transportStyleStr = e[0].label;
        this.baseInfo.transportStyle = e[0].extra.bcbCode;
        if(e[0].extra.bcbCode == K_TRAN_STYLE.CAR){
          this.tranStatus = true;
        }else{
          this.tranStatus = false;
        }
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_CAR_COLOR) { // 车辆颜色
        this.baseInfo.carColorStr = e[0].label;
        this.baseInfo.carColor = e[0].extra.bcbCode;
      }
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.S_SYS_YES_NO) { // 是否伪装
        this.baseInfo.pretendStr = e[0].label;
        this.baseInfo.pretend = e[0].extra.bcbCode;
      }
    },
    updateBackState(param){
      if (param.refresh) {
        this.driverList = this.driverList.filter(item => {
          return item.uuid != param.refresh.uuid
        })
        this.driverList.push(param.refresh)
      } else if (param.delRefresh || param.delRefresh == 0) {
        this.driverList.splice(param.delRefresh,1)
      }else if (param.holderSave) {
        this.handlerList = this.handlerList.filter(item => {
          return item.id != param.holderSave.id
        })
        this.handlerList.push(param.holderSave)
      }else if (param.holderDel || param.holderDel == 0) {
        this.handlerList.splice(param.holderDel,1)
      }
    },
    dicSelectOpen(type, keyWords) {
      if (type == this.dicType) {
        if (this.dicKeyWords == keyWords && this.dicShow) {
          return true;
        }
        return false;
      }
    },
    showDic(key, cur, type) {
      if (this.dicShow) return;
      if(key == 'C_CAR_STYLE' && this.isDisabled) return ;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
      this.dicType = type;
    },
    submit(){
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let params = this.baseInfo;
          let detailList = {
            detailList: {
              driverList: this.driverList,
              handlerList: this.handlerList,
            },
          }
          this.$modal.showLoading('保存中...');
          intelligenceservice.savecarInfoPage({ ...params, ...detailList, }).then(res => {
            this.$modal.hideLoading();
            if(res.success){
              this.baseInfo = res.data;
              this.backPrev({
                paramKey:'refresh',
                param:true,
              })
            }else{
              this.$u.toast(res.msg);
            }
          }).catch(err => {
            this.$modal.hideLoading();
            console.log(err);
            this.$u.toast("保存失败");
          });
        } else {
          console.log('验证失败');
        }
      });

    },
    close(){
      this.$u.route('pages/intelligence/intelligenceTransportList');
    },
  },

}
</script>

<style scoped lang="scss">
@import "./add.scss";
</style>
